<template>
  <view class="container">
    <view class="content">
      <view class="form-group">
        <text class="form-label">服务地址</text>
        <text class="form-value">原服务地址：{{ detailData?.orderAddress?.address }}</text>
        <text class="form-change">变更服务地址：</text>
        <view class="form-input" @click="showAddress">
          <uni-easyinput v-model="form.address"  placeholder="请选择服务地址" :disabled="true" suffixIcon="right"
            ></uni-easyinput>
        </view>
      </view>

      <view class="form-group card" v-for="(item, index) in detailData?.orderServices" :key="item.id">
        <text class="form-title border-1px">{{ item.name }}</text>
        <text class="form-label">服务时间</text>
        <text class="form-value">原服务时间：{{ item.startTime }} - {{ item.endTime }}</text>
        <text class="form-change">变更服务时间：</text>

        <view class="form-input datetime-picker-container" @click="openTime(index)">
          <!-- <uni-datetime-picker type="datetime" v-model="datetimesingle" :clearIcon="false" placeholder="请选择服务时间"
            :border="false" class="datetime-picker" /> -->
          <!-- <uni-icons type="right" size="15" color="#666666" class="picker-icon" @click="openTime()"></uni-icons> -->
          <uni-easyinput v-model="item.newDate" placeholder="请选择服务时间" :disabled="true" suffixIcon="right"
            ></uni-easyinput>
        </view>
      </view>
    </view>
    <view class="footer">
      <button class="cancel-btn" @click.stop="cancel">取消</button>
      <button class="confirm-btn" @click.stop="toSubmit">确定</button>
    </view>

    <liu-delivery-time @change="changeTime" ref="chooseTime" title="请选择预约时间"></liu-delivery-time>
  </view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import {
  orderDetail,
  updateService
} from "@/api/consumerOrder.js";

const form = reactive({
  address: '',
  addressId: '',
  orderId: '',
});

const showAddress = () => {
  uni.navigateTo({
    url: "/pages/tabBars/serviceAddress/serviceAddress",
    events: {
      // 定义接收事件,添加地址成功刷新页面
      acceptDataAddress: (data) => {
        console.log(data, '-=-=-');
        form.addressId = data.id
        form.address = data.provinceLive + data.cityLive + data.areaLive + data.address + data.doorNumber;
      }
    }
  });
};

// 选择时间
const timeIndex = ref(0)
const chooseTime = ref();
const openTime = (index) => {
  timeIndex.value = index
  chooseTime.value.open();
};

const changeTime = (data) => {
  console.log(data);
  detailData.value.orderServices[timeIndex.value].newDate = data.value
  detailData.value.orderServices[timeIndex.value].newStartTime = `${data.day} ${data.startHour}`
  detailData.value.orderServices[timeIndex.value].newEndTime = `${data.day} ${data.endHour}`
};

const toSubmit = () => {
  if (!form.addressId) {
    uni.showToast({
      title: "请选择地址",
      icon: "none",
    });
    return
  }

  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  const array = detailData.value.orderServices.map(item => {
    return {
      serviceId: item.id,
      startTime: item.newStartTime,
      endTime: item.newEndTime,
    }
  })
  const params = {
    orderId: orderId.value,
    addressId: form.addressId,
    orderServices: array
  }
  updateService(params).then((response) => {
    if (response.code == 200) {
      uni.showToast({
        title: "变更成功",
        icon: "success",
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  }).catch((err) => {
    uni.showToast({
      title: "变更失败",
      icon: "error",
    });
  })
}

const cancel = () => {
  uni.navigateBack();
}

const orderId = ref('');
const detailData = ref(null);
const getOrderDetail = () => {
  console.log(orderId, orderId.value);
  orderDetail(orderId.value).then((response) => {
    detailData.value = response.data;
    detailData.value.orderServices.forEach(ele => {
      ele.newDate = ''
      ele.newStartTime = ''
      ele.newEndTime = ''
    });
  });
};

onLoad((option) => {
  orderId.value = option.id;
  form.orderId = option.id;
  console.log(option, orderId.value, 'option');
  getOrderDetail()
});

onMounted(async () => {
  // 初始化逻辑
});
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;

  background-color: #F5F5F5;
}

.content {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
  .form-group {
    margin-bottom: 24rpx;
    // height: 260rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // gap: 30rpx;
    padding: 42rpx 25rpx;
    background: #FFFFFF;
    border-radius: 20rpx;

    .form-label {
      margin-bottom: 16rpx;
      display: block;
      font-size: 28rpx;
      color: #303133;
      // margin-bottom: 10rpx;
      font-weight: 500;
    }

    .form-value {
      margin-bottom: 30rpx;
      display: block;
      font-size: 24rpx;
      color: #666666;
      // margin-bottom: 20rpx;
      font-weight: 400;
    }

    .form-change {
      margin-bottom: 28rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      // margin-bottom: 20rpx;
    }

    .form-input {
      position: relative;

      &.datetime-picker-container {
        display: flex;
        align-items: center;

        .datetime-picker {
          flex: 1;
          // 其他样式...
        }

        .picker-icon {
          position: absolute;
          right: 20rpx; // 调整这个值来控制图标距离右侧的距离
          pointer-events: none; // 使图标不拦截点击事件
        }
      }

      input,
      .picker {
        // width: 100%;
        height: 88rpx;
        padding: 0 20rpx;
        border-radius: 10rpx;
        font-size: 28rpx;
        color: #999999;
        background: #f0f5fb;
        display: flex;
        align-items: center;
      }
    }
  }

  .card {
    padding-top: 0;

    .form-title {
      margin-bottom: 35rpx;
      height: 94rpx;
      line-height: 94rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
    }
  }
}

.border-1px {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e2e2e2;
    transform: scaleY(0.5);
    transform-origin: bottom;
  }
}

.footer {
  display: flex;
  justify-content: space-between;
  padding-top: 20rpx;
  padding-bottom: 40rpx;

  .cancel-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 189rpx;
    height: 88rpx;
    background: #999999;
    color: #fff;
    font-size: 30rpx;
    font-weight: 500;
    border-radius: 44rpx;
  }

  .confirm-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 489rpx;
    height: 88rpx;
    color: #fff;
    background: #2f80ed;
    border-radius: 44rpx;
    font-size: 30rpx;
    font-weight: 500;
  }
}

::v-deep .uni-date-x {
  background: #f0f5fb !important;
  border-radius: 10rpx !important;
}

::v-deep .uni-date__x-input {
  height: 88rpx !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 20rpx !important;
}

::v-deep .uniui-calendar {
  display: none !important;
}

::v-deep .uni-easyinput__content {
  background: #F0F5FB !important;
  border-color: transparent !important;
}
</style>
